<template>
	<view class="pageContainer myBackground" :style="{height: `${windowHeight}px`}">
		<view class="pl15 pr15">
			<div class="d-flex flex-wrap a-center j-sb">
				<view class="item_box mb15 p15" v-for="(item, index) in imgListData" :key="index" @click="gotoPage(item)"
					:style="{'backgroundImage': 'url('+item.createBy+')'}">
					<view class="d-flex a-center">
						<view>
							<image style="width: 32px; height: 32px;" mode="aspectFill" :src="item.menuIcon"></image>
						</view>
						<view class="ml10 title fs16">{{item.menuName}}</view>
					</view>
				</view>
			</div>
		</view>

		<view style="width: 100%;height: 120rpx;"></view>
		<tab-bar-view :tabCode="'1'"></tab-bar-view>
	</view>
</template>

<script>
	import {

	} from "@/api/index.js"

	export default {
		data() {
			return {
				userInfo: {},
				imgListData: []
			};
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.imgListData = uni.getStorageSync('featureCenterData')
		},
		onShow() {
			// this.userInfo = uni.getStorageSync('userInfo')
		},
		onReady() {
			// 隐藏导航栏
			uni.hideTabBar({});
		},
		methods: {
			gotoPage(item) {
				if (!item.menuPath) {
					return uni.showToast({
						title: '功能待开发',
						icon: 'none',
						duration: 500
					});
				}

				uni.navigateTo({
					url: item.menuPath + '?activeMenu=' + item.activeMenu + '&menuName=' + item.menuName
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.pageContainer {
		// padding-top: calc(var(--status-bar-height) + 30rpx);
		box-sizing: border-box;
		font-family: Source Han Sans CN, Source Han Sans CN-500;

		.item_box {
			box-sizing: border-box;
			width: 332rpx;
			height: 232rpx;
			border-radius: 24rpx;
			background-size: 100% 100%;

			.title {
				color: #ffffff;
			}
		}
	}
</style>